<template>
  <div>
    <el-form :model="articleForm" label-position="right" label-width="100px">
      <el-form-item label="标题">
        <el-input v-model="articleForm.title"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="articleForm.desc" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="上传md文件">
        <el-upload
          class="upload-demo"
          drag
          :action="baseUrl + '/article/uploadMd'"
          :limit="1"
          :auto-upload="false"
          :with-credentials="true"
          ref="mdForm"
          :on-change="mdChange"
          :before-remove="beforeRemove"
          :on-success="mdUploadSuccess"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处或 <em>点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">
              <!-- jpg/png files with a size less than 500kb -->
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="上传文件封面">
        <el-upload
          class="avatar-uploader"
          :action="baseUrl + '/article/uploadCover'"
          :show-file-list="false"
          :auto-upload="false"
          :with-credentials="true"
          ref="coverForm"
          :on-change="coverChange"
          :on-success="coverUploadSuccess"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">发表文章</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articleForm: {
        title: "", //文章标题
        describe: "", //描述
        mdUrl: "", //md文件的地址
        coverUrl: "", //封面的地址
      },
      imageUrl: "", //封面缩略图的url地址
    };
  },
  methods: {
    //添加md文件、成功上传md、上传失败时都会调用mdChange
    mdChange(file, fileList) {
      console.log(fileList);
      if (file.status === "ready") {
        //为待上传状态时，对md文件做校验
        if (/^(.+)\.md$/.test(file.name)) {
          //只有文件后缀名为.md时
          this.articleForm.title = RegExp.$1; //获取上一次正则匹配结果中()组内匹配到的字符串内容
        } else {
          this.$message.error("只能上传.md后缀名的文件");
          fileList.pop(); //从尾部删除文件列表中的文件对象
        }
      }
    },
    //从文件列表中删除文件后，触发
    beforeRemove(file) {
      this.articleForm.title = "";
    },
    //添加封面图片、成功上传封面、上传失败时都会调用coverChange
    coverChange(file, fileList) {
      // console.log(file);
      if (file.status === "ready") {
        const isJPG =
          file.raw.type === "image/jpeg" || file.raw.type === "image/png";
        const isLt2M = file.raw.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error("上传图片只能是 JPG/PNG 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传图片大小不能超过 2MB!");
        }
        if (isJPG && isLt2M) {
          //图片符合标准
          this.imageUrl = URL.createObjectURL(file.raw); //设置缩略图的路径
        } else {
          fileList.pop(); //删除文件列表中的不合标准的图片
        }
      }
    },
    //发表文章
    submitForm() {
      this.$refs.mdForm.submit();
    },

    //md文件上传后接收到响应时，会自动调用
    mdUploadSuccess(res) {
      //md上传失败
      if (res.code) return this.$message.error(res.message);
      this.articleForm.mdUrl = res.mdUrl; //得到md文件的地址

      //md上传成功后，接着上传的封面图
      if (this.imageUrl) {
        //有封面，需要上传封面图
        this.$refs.coverForm.submit(); //调用上传控件的提交事件，发起请求提交文件到后端
      } else {
        //没有封面，接着提交表单的其他数据
        this.fromSubmit(); //提交表单的数据到后端
      }
    },

    //封面上传后接收到响应时会自动调用
    coverUploadSuccess(res) {
      //封面上传失败
      if (res.code) return this.$message.error(res.message);
      this.articleForm.coverUrl = res.coverUrl; //得到cover封面的地址

      this.fromSubmit(); //提交表单的数据到后端
    },

    // 提交表单的数据到后端
    async fromSubmit() {
      let { data } = await this.$axios({
        method: "POST",
        url: "/article/add",
        data: this.articleForm, //表单数据
      });
      if (data.code) return this.$message.error(data.message);
      this.$message.success(data.message);
      this.articleForm = {
        title: "",
        describe: "",
        mdUrl: "",
        coverUrl: "",
      };
      this.$refs.mdForm.clearFiles()
      this.$refs.coverForm.clearFiles()
      // this.$router.push(`/article/${data.data.id}`); //跳转到id对应的文章详情页
    },
    //
  },
};
</script>

<style lang="less" scoped>
.el-form-item {
  margin: 40px 20px;
  margin-left: 0;
}
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>